<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>🌈 Rainbow divs 🌈</title>
    <style>
        /* TODO: The viewport background should come from system colors, not <html> CSS rules. */
        html {
            background-color: white;
        }
        div {
            display: block;
            padding: 12px;
        }
        .a { background-color: #ff0000; }
        .b { background-color: #ffa500; }
        .c { background-color: #ffff00; }
        .d { background-color: #008000; }
        .e { background-color: #0000ff; }
        .f { background-color: #4b0082; }
        .g { background-color: #800080; }
    </style>
</head>
<body>
<div class="a">
    <div class="b">
        <div class="c">
            <div class="d">
                <div class="e">
                    <div class="f">
                        <div class="g">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>